<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp"%>
<style>
<!--
.tab {
	margin-bottom: 0px;
	margin-top: 6px;
}

.tab>li>a {
	line-height: 22px;
	padding-bottom: 2px;
	padding-top: 2px;
}

.tab-content {
	border: 1px solid #E3E3E3;
	border-radius: 0px 0px 4px 4px;
	border-top: none;
	padding: 2px;
}

#goodsQr {
	min-height: 40px;
	width: 80%;
}

#mGoods {
	background-color: #FFFFFF;
	border: 1px solid #E3E3E3;
	border-radius: 4px;
	max-height: 500px;
	min-height: 100px;
	overflow-y: auto;
	padding: 10px;
	width: 97.5%;
}

.box {
	border: 1px solid blue;
	border-radius: 4px;
	margin: 4px;
	padding: 6px;
	line-height: 20px;
}

.box .close {
	margin-top: -20px;
}
-->
</style>
<!-- 分页显示演示开始 -->
<ul class="nav nav-tabs tab tBlock">
	<li class="active">
		<a deny="not" class="nFocus" href="#single" data-toggle="tab">
			<i class="icon-tags"></i>
			商品出库
		</a>
	</li>
</ul>
<div class="tab-content">
	<div class="tab-pane active" id="single">
		<form id="inputForm" class="well form-inline" action="${ctx}/adoms/goods/outStock" method="post">
			<table class="table table-striped table-bordered table-condensed">
				<tr>
					<td class="span2">选择订单:</td>
					<td>
						<select id="order" style="width: auto;" name="id">
							<option value="0" id="please">请选择出库单...</option>
							<c:forEach items="${orderList }" var="order" varStatus="i">
								<option value="${order.id }">${i.index + 1 }.${order.code } - ${order.goodsNumber} - ${order.status.value }</option>
							</c:forEach>
						</select>
						<span class="tBlue">序号.订单编号-商品数量-订单状态</span>
					</td>
				</tr>
				<tr>
					<td>商品定购详情：</td>
					<td>
						<div id="mInfo"></div>
					</td>
				</tr>
				<tr>
					<td class="span2" valign="top">
						商品二维码:
						<br />
						<span class="tRed">
							共
							<span id="outTotal">0</span>
							条
							<br />
							已录入
							<span id="outNum">0</span>
							条
						</span>
					</td>
					<td>
						<input name="goodsQr" id="goodsQr" class="span6" type="text" maxlength="50" />
						<span id="clearBtn" class="btn btn-small btn-primary">清 空</span>
					</td>
				</tr>
				<tr>
					<td valign="top">出库货物列表:</td>
					<td>
						<div id="mGoods">
							<div id="qrBar"></div>
						</div>
					</td>
				</tr>
				<tr>
					<td valign="top">备注:</td>
					<td>
						<textarea id="memo3" maxlength="400" name="memo3" rows="4" class="tWidth98"></textarea>
					</td>
				</tr>
				<tr>
					<td>操作员:</td>
					<td>
						<input type="text" id="outUser" name="outUser" value="${USER.name }" />
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input id="outSubmit" class="btn  span2 btn-primary" title="商品出库后，订单状态将更新为已发货" disabled="disabled" type="button" value="确认出库" />
					</td>
				</tr>
			</table>
		</form>
	</div>
	<div id="orderDetail"></div>
	<a class="right btn" href="#single" deny="not">
		<i class="icon-arrow-up"></i>
		TOP
	</a>
</div>
<script>
	$(document).ready(function() {
		//全局共用变量
		var marchandiseIdString = "mid";
		//为inputForm注册validate函数
		$("#inputForm").validate({
			rules : {
				marchandise : "required",
				department : "required",
				outUser : "required",
				salesState : "required",
				qrCode : "required",
				// 				outTime : "required",
				memo3 : "required"
			}
		});
		$("#order").change(function() {
			$("#please").remove();
			var orderId = $(this).val();
			if (orderId) {
				marchandiseIdString = "";
				//加载选中的订单所订购的商品列表详情
				$("#mInfo").load("${ctx}/adoms/orderLine/list/" + orderId + " #dataList", function() {
					$("#dataList tr").each(function() {
						$("a", this).removeAttr("href");
						$("th:eq(1)", this).remove();
						$("th:last", this).remove();
						//$("th:last", this).after("<th><a href='###'>已录入数</a></th>");
						$("th:last", this).show();
						$("td:eq(1)", this).remove();
						$("td:last", this).remove();
						var counterId = "counter" + $("td[mId]", this).attr("mId");
						marchandiseIdString += "#" + counterId + ",";
						//$("td:last", this).after("<td id='" + counterId + "' class='tRed'>0</td>");
						$("td:last", this).attr("id", counterId).addClass('tRed').show();
					});
					//计算已经入库的数字
					var num = 0;
					$("td.hasIn").each(function() {
						num += parseInt($(this).html());
					});
					$("#outNum").html(num);
				});
			}
			//加载订单的详情
			$("#orderDetail").load("${ctx}/adoms/order/view/" + $(this).val() + " #printDiv", function() {
				$("#clearBtn").click();
				var order = $("#order" + orderId);
				var mid = $("input[name='marchandise.id']", order).val();
				var goodsNumber = $("input[name=goodsNumber]", order).val();
				$("#outTotal").text(goodsNumber);
				$("#mDetail").remove();
			}, "html");
		});
		$("#outSubmit").click(function() {
			$("#inputForm").submit();
		});
		$("#goodsQr").on("keyup blur", function(e) {
			var _self = $(this);
			var keyCode = e.keyCode;
			if (!keyCode || keyCode == 13) {
				var val = $.trim($("#goodsQr").val());
				var html = $("#qrBar").html();
				if (html.indexOf("(" + val + ")") < 0) {
					if (val) {
						$.post("${ctx}/adoms/goods/getGoodsByCodeOrBox", {
							qrCode : val
						}, function(data) {
							//列出本箱中未入库的货物
							var len = 0; //有效计数器
							var inMid = "";
							var box = $("<div name='box' class='box' value='" + val + "'><span class='close' name='boxRemove'>x</span></div>");
							if (data) {

								//是否已经开箱
								var isOpenBox = false;
								if (data.length > 1 && data[0].mNumOfBox != data.length) {
									isOpenBox = true;
									msgAlert.show("该箱已被开箱，箱码失效，请单个扫描！");
									return false;
								}

								//过滤重复的二维码
								var isQrRepeat = false;
								$.each(data, function(i, item) {
									var length = $("[name=goodsId][value=" + item.gId + "]").length;
									if (length > 0) {
										isQrRepeat = true;
										if (data.length > 1) {
											msgAlert.show("该箱已被开箱，箱码失效，请单个扫描！");
										} else {
											msgAlert.show("商品" + item.qwCode + "重复扫描！");
										}
										return false;
									}
								});
								if (isQrRepeat) {
									return false;
								}

								var willNum = 0;
								$.each(data, function(i, item) {
									//计数
									var mid = item.mId;
									var counterId = "#counter" + mid;
									inMid = counterId;
									var total = parseInt($.trim($("#mg" + mid + " span[itemsNum]").text()));
									var hasIn = parseInt($.trim($(counterId).html()));
									if (hasIn == total) {
										msgAlert.show("商品：" + item.mName + "已录入完成！");
										return false;
									}
									if (willNum == 0) {
										willNum = data.length + hasIn;
										if (willNum > total) {
											msgAlert.show("录入数量已达上限，请分单个商品录入！");
											return false;
										}
									}
									if (marchandiseIdString.indexOf(counterId) > 0) {
										var goods = item.mName + "<input type='hidden' name='goodsId' value='" + item.gId + "'/> - " + item.qwCode + " - " + item.state + "<br/>";
										$(counterId).html(parseInt($(counterId).text()) + 1); //计数每样商品
										$("#outNum").html(parseInt($("#outNum").html()) + 1);
										//提交按钮可用
										if ($("#outTotal").text() == $("#outNum").text()) {
											$("#outSubmit").removeAttr("disabled");
										}
										len++;
										box.append(goods);
									}
								});
								if (len > 0) {
									box.prepend("二维码：" + val + " - 数量：" + len + "<br/>");
								} else {
									box.prepend("二维码：" + val + " - <span style='color:red;'>无效</span><br/>");
								}
							} else {
								box.append("二维码：" + val + " <span style='color:red;'>无效</span>");
							}
							$(".close", box).click(function() {
								$(inMid).html(parseInt($(inMid).text()) - len); //计数每样商品
								$("#outNum").html(parseInt($("#outNum").html()) - len);
								box.remove();
							});
							$("#qrBar").prepend(box);
						}, "json");
					} else {
					}
				}
				_self.val("");
			}
		}).focus(function() {
			if ($("#order").val() == "0") {
				msgAlert.show("请选择发货订单！");
				return false;
			}
		});
		$("#clearBtn").click(function() {
			$("#goodsQr").val("");
			$("#qrBar").html("");
			$("#outSubmit").attr("disabled", "disabled");
			$("#outNum").html("0");
		});
	});
</script>
<div class="hide">
	<c:forEach items="${orderList }" var="order" varStatus="i">
		<div class="hide" id="order${order.id }">
			<input type="hidden" value="${order.marchandise.id }" name="marchandise.id" />
			<input type="hidden" value="${order.goodsNumber }" name="goodsNumber" />
		</div>
	</c:forEach>
</div>
<c:if test="${msg != null}">
	<script>
		msgAlert.show("${msg}");
	</script>
</c:if>